<template>
  <button
    :class="['base-button', type]"
    :disabled="disabled"
    @click="$emit('click', $event)"
  >
    <slot />
  </button>
</template>

<script>
export default {
  name: 'BaseButton',
  props: {
    type: {
      type: String,
      default: 'default', // 可选: default, primary, danger
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

<style scoped>
.base-button {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  background: #f5f5f5;
  color: #333;
  transition: background 0.2s;
}
.base-button.primary {
  background: #409eff;
  color: #fff;
}
.base-button.danger {
  background: #f56c6c;
  color: #fff;
}
.base-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style> 